<template>
	<view>
		<!-- 房车预约页面 -->
		<view>
			<!-- 轮播图 -->
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" indicator-color="#999999" indicator-active-color="white" indicator-dots autoplay interval="2000"
						 duration="500" circular="true">
							<swiper-item v-if="imgs!=null" v-for="img in imgs" :key="img.imgId">
								<view class="swiper-item uni-bg-red">
									<image :src="img.url"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- 营区介绍 -->
			<view class="introduce">
				<view class="introduce_title">
					<view class="introduce_title_left">
						<text>营区介绍</text>
					</view>
					<view class="introduce_title_right">
						<view v-if="showOrhide" @click="showOrhide1()">
							<text>收起详情</text>
							<text class="icon">&#xe65a;</text>
						</view>
						<view v-else @click="showOrhide1()">
							<text>展开详情</text>
							<text class="icon">&#xe658;</text>
						</view>
					</view>
				</view>
				<view class="introduce_content" v-if="showOrhide">
					<view class="introduce_content_text">
						<text>{{camp.introduce}}</text>
					</view>
				</view>
			</view>
			<!-- 直播观光营 -->
			<view class="sightseeing">
				<view class="sightseeing_title">
					<text>直播观光营</text>
				</view>
				<view class="icon">
					<view>
						<text>&#xe8c1;</text>
					</view>
					<view>
						<text>&#xe8c1;</text>
					</view>
					<view>
						<text>&#xe8c1;</text>
					</view>
				</view>
			</view>
			<!-- 营位图 -->
			<view class="camp_map">
				<view class="camp_map_title">
					<text>营位图</text>
				</view>
			</view>
			<view class="camp_map_img">
				<image v-if="imgs.length!=0" :src="imgs[0].url"></image>
			</view>
			<!-- 房车预约 -->
			<view class="appointment">
				<view class="appointment_title">
					<view class="appointment_title1">
						<text>房车</text>
					</view>
					<view class="appointment_title1">
						<text>特色住宿</text>
					</view>
					<view class="appointment_title1">
						<text>物资</text>
					</view>
				</view>
			</view>
			<view class="car" v-if="cars.length!=0" v-for="(car,index) in cars">
				<view class="car_img">
					<image :src="car.url"></image>
				</view>
				<view class="car_date">
					<!-- 左边选择 -->
					<view class="car_date_content">
						<view class="intime">
							<view class="intime_title">
								<text>入住</text>
							</view>
							<view class="intime_time" v-if="list.length!=0">
								<text>{{list[index].startTime}}</text>
							</view>
						</view>
						<view class="days">
							<view v-if="list[index].days!=0 && list[index].days!=NaN">
								<text>{{list[index].days}}天</text>
							</view>
							<view v-else>
								<text>--天</text>
							</view>
						</view>
						<view class="outtime">
							<view>
								<text>离店</text>
							</view>
							<view class="outtime_time" v-if="list.length!=0">
								<text>{{list[index].endTime}}</text>
							</view>
						</view>
					</view>
					<!-- 右边预约按钮 -->
					<view class="appointment_button" @click="open(index)">
						<text>预订</text>
					</view>
					<view class="car_detail">
						<view class="car_detail_title">
							<text>{{car.carName}}</text>
						</view>
						<view class="car_money">
							<text>单价：￥{{car.price}}.00</text>
						</view>
						<view class="car_money">
							<text>定金：￥200</text>
						</view>
					</view>
				</view>
			</view>
			<uni-calendar v-if="list.length!=0" :range=true ref="calendar" :insert="false" @confirm="confirm" :startDate="list[clickIndex].startTime"
			 :endDate="list[clickIndex].endTime" />
			<!-- 底部 -->
			<view class="footer">
				<view class="footer_total">
					<text>总计：</text>
				</view>
				<view class="total_money">
					<text>
						￥{{total+num*200}}元
					</text>
				</view>
				<view class="footer_button">
					<button type="warn" @click="gotoconfirm('pages/appointment_confirm/appointment_confirm')">提交预订</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				list: [],
				clickIndex: 0,
				showOrhide: true,
				days: 0,
				rangeformat: [],
				cars: [],
				camp: '',
				imgs: [],
				num: 0,
				//定义一个数组缓存数据
				carcache: [],
				checkTime: ''
			}
		},
		onLoad(options) {
			this.getDate();
			this.selectCamp(options.campId);
			this.selectCampImg(options.campId);
			this.selectCars(options.campId);
			uni.setStorageSync("carcache", this.carcache);
		},
		computed: {
			total: function() {
				if (this.cars.length == 0) {
					return 0;
				}
				this.num = 0;
				var total = 0;
				var price = this.cars[this.clickIndex].price;
				var day = this.list[this.clickIndex].days;
				this.list[this.clickIndex].total = price * day;
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].total != 0) {
						this.num = this.num + 1;
					}
					total = total + this.list[i].total;
				}
				return total;
			}
		},
		methods: {
			//判断日期是否合法
			checkTime1() {
				uni.request({
					url: this.webUrl + 'order/checkAppointmentTime?carId=' + this.cars[this.clickIndex].carId + "&startTime=2020-" +
						this.list[this.clickIndex].startTime + "&endTime=2020-" + this.list[this.clickIndex].endTime,
					success: (res) => {
						this.checkTime = res.data.message;
						console.log(this.checkTime)
					}
				});
			},
			// 跳转到确认页面
			gotoconfirm(path) {
				if (this.checkTime != 'true') {
					uni.showToast({
						title: '当前时间已被预订'
					})
					return;
				}
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].days != 0) {
						var stime = '2020-' + this.list[i].startTime;
						var etime = '2020-' + this.list[i].endTime;
						var days = this.list[i].days;
						var campName = this.camp.campname;
						var carName = this.cars[i].carName;
						var price = this.cars[i].price;
						var url = this.cars[i].url;
						var total = this.total + this.num * 200;
						this.carcache.push({
							startTime: stime,
							endTime: etime,
							days: days,
							campName: campName,
							carName: carName,
							price: price,
							url: url,
							total: total
						});
					}
				}
				uni.setStorageSync("carcache", this.carcache);
				var _this = this;
				setTimeout(function() {
					if (_this.carcache.length == 0) {
						uni.showToast({
							title: '还未选择套餐'
						})
					} else {
						uni.navigateTo({
							url: "/" + path + "?orderList=" + this.carcache
						})
					}
				}, 200)
			},
			showOrhide1: function() {
				this.showOrhide = !this.showOrhide
			},
			// 获取房车信息
			selectCars: function(campId) {
				uni.request({
					url: this.webUrl + 'car/selectByCampId?campId=' + campId,
					success: (res) => {
						this.cars = res.data.list;
						for (var i = 0; i < this.cars.length; i++) {
							this.list.push({
								startTime: '',
								endTime: '',
								days: 0,
								total: 0
							});
						}
					}
				});
			},
			//查询营地信息
			selectCamp: function(campId) {
				uni.request({
					url: this.webUrl + 'camp/selectbyCampId?campId=' + campId,
					success: (res) => {
						this.camp = res.data.obj;
						uni.setNavigationBarTitle({
							title: '' + this.camp.campname + ''
						});
					}
				});
			},
			//查询营地图片
			selectCampImg: function(campId) {
				uni.request({
					url: this.webUrl + 'camp/selectCampImgByCampId?campId=' + campId,
					success: (res) => {
						this.imgs = res.data.list;
					}
				});
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].startTime = `${month}-${day}`;
					// this.list[i].endTime = `${month}-${day+1}`;
				}
			},
			open(index) {
				this.clickIndex = index;
				this.$refs.calendar.open();
			},
			confirm(e) {
				this.list[this.clickIndex].startTime = e.range.before.slice(5).replace('/', '-');;
				this.list[this.clickIndex].endTime = e.range.after.slice(5).replace('/', '-');;
				var a1 = Date.parse(new Date(this.list[this.clickIndex].startTime));
				var a2 = Date.parse(new Date(this.list[this.clickIndex].endTime));
				// var day = parseInt((a2 - a1)/(1000*60*60*24)); //核心：时间戳相减，然后除以天数
				var beforeMonth = this.list[this.clickIndex].startTime.substring(0, 2);
				var afterMonth = this.list[this.clickIndex].endTime.substring(0, 2);
				var beforeDay = parseInt(this.list[this.clickIndex].startTime.substring(3, 5));
				var afterDay = parseInt(this.list[this.clickIndex].endTime.substring(3, 5));
				var day = 0;
				if (beforeMonth == afterMonth) {
					day = afterDay - beforeDay;
				}
				if (beforeMonth < afterMonth) {
					if (beforeMonth == '01' || beforeMonth == '03' || beforeMonth == '05' || beforeMonth == '07' || beforeMonth ==
						'08' || beforeMonth == '10' || beforeMonth == '12') {
						afterDay = afterDay + 31;
					} else if (beforeMonth == '02') {
						afterDay = afterDay + 28;
					} else {
						afterDay = afterDay + 30;
					}
					day = afterDay - beforeDay;
				}
				if (day <= 0) {
					day = -day;
					var temp = this.list[this.clickIndex].startTime;
					this.list[this.clickIndex].startTime = this.list[this.clickIndex].endTime;
					this.list[this.clickIndex].endTime = temp;
				}
				this.list[this.clickIndex].days = day;
				this.checkTime1();
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		width: 100%;
		height: 100rpx;
		background-color: #F0F0F0;
		font-size: 30rpx;
		line-height: 100rpx;
		position: fixed;
		bottom: 0rpx;

		.footer_total {
			float: left;
			margin-left: 20rpx;
		}

		.total_money {
			color: #FF3333;
			float: left;
		}

		.footer_button {
			float: right;
			margin-top: 25rpx;
			margin-right: 20rpx;

			button {
				color: white;
				font-size: 26rpx;
				line-height: 50rpx;
				width: 180rpx;
				height: 50rpx;
			}
		}
	}

	.swiper {
		width: 88%;
		height: 350rpx;
		margin: 0 auto;
	}

	.swiper-item {
		image {
			width: 100%;
			height: 350rpx;
		}
	}

	.introduce {
		font-size: 28rpx;
		color: #777777;

		.introduce_title {
			width: 100%;
			height: 60rpx;
			margin-top: 15rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 1px solid #BEBEBE;

			.introduce_title_left {
				margin-left: 25rpx;
			}

			.introduce_title_right {
				margin-right: 25rpx;

				.hidedetail {
					display: none;
				}

				.showdetail {
					display: block;
				}
			}
		}

		.introduce_content {
			width: 100%;
			margin: 0 auto;
			border-bottom: 1px solid #BEBEBE;

			.introduce_content_text {
				width: 93%;
				margin: 20rpx auto;
			}
		}
	}

	.sightseeing {
		width: 50%;
		height: 100rpx;
		font-size: 30rpx;
		margin-left: 20rpx;
		line-height: 100rpx;
		color: #777777;

		.sightseeing_title {
			width: 40%;
			float: left;
			margin-right: 10rpx;
		}

		.icon {
			width: 50%;
			float: left;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 60rpx;
		}
	}

	.camp_map {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #777777;
		border-top: 1px solid #BEBEBE;
		border-bottom: 1px solid #BEBEBE;

		.camp_map_title {
			margin-left: 20rpx;
		}
	}

	.camp_map_img {
		width: 70%;
		height: 300rpx;
		margin: 20rpx auto;

		image {
			width: 100%;
			height: 300rpx;
		}
	}

	.appointment {
		width: 100%;
		height: 90rpx;
		background-color: #464646;
		color: white;
		float: left;
		line-height: 90rpx;
		font-size: 30rpx;

		.appointment_title {
			.appointment_title1 {
				float: left;
				margin-left: 30rpx;
			}
		}
	}

	.car {
		height: 350rpx;
		border-bottom: 1px solid #D3D3D3;

		// margin-top: 20rpx;
		.car_img {
			width: 30%;
			height: 300rpx;
			margin-left: 15rpx;
			margin-top: 15rpx;
			float: left;

			image {
				width: 100%;
				height: 110rpx;
			}
		}

		.car_date {
			width: 60%;
			height: 300rpx;
			float: left;
			margin-left: 15rpx;
			color: #777777;
			font-size: 30rpx;
			margin-top: 15rpx;

			.car_date_content {
				width: 80%;
				height: 100rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;

				.intime {
					.intime_time {
						width: 100rpx;
						font-size: 25rpx;
						color: #007AFF;
					}
				}

				.outtime {
					.outtime_time {
						width: 100rpx;
						font-size: 25rpx;
						color: #007AFF;
					}
				}
			}

			.days {
				width: 30%;
				height: 50rpx;
				border-radius: 30rpx;
				margin-top: 20rpx;
				text-align: center;
				line-height: 50rpx;
				border: 1rpx solid #777777;
			}

			.appointment_button {
				width: 20%;
				height: 50rpx;
				border-radius: 15rpx;
				line-height: 50rpx;
				text-align: center;
				color: #FFA197;
				border: 1rpx solid #FFA197;
				float: right;
				margin-top: -85rpx;
			}

			.car_detail {
				color: #FF3333;
				margin-left: 10rpx;

				.car_detail_title {
					color: black;
				}

				.car_money {
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
